{{extend '../_layouts/home.html'}}

{{block 'title'}}{{'多人博客 - 首页'}}{{/block}}

{{block 'head'}}
<link rel="stylesheet" href="/public/css/markdown-github.css">
<style>
  .panel .panel-heading .action i {
    margin-right: 10px;
  }
</style>
{{/block}}

{{block 'body'}}
<section class="container">
  <div class="row">
    <div class="col-md-12">
      <article class="markdown-body">
      <h3 style="text-align: center;">{{data.title}}</h3>
      <div style="color:#ccc;text-align: center;"><span>作者：{{data.author}}</span>&nbsp;&nbsp;&nbsp;<span>阅读量：{{data.browse}}</span></div>
      <div style="color:#ccc;text-align: center;"><span>发表时间：{{data.time}}</span></div>
      <div style="color:#ccc;text-align: center;"><span>修改时间：{{data.last}}</span></div>
   <div id="content">{{@ data.content}}</div>
    </article>
    <div id="test_comment"></div>
    {{each data.comments}}
      <div class="panel panel-default">
        <div class="panel-heading">
          <span>{{$value.name}}</span> 
          <span>{{$value.time}}</span>
          <span class="action">
            <a href=""><i class="glyphicon glyphicon-thumbs-up pull-right"></i></a>
            <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
          </span>
        </div>
        <div class="panel-body">
         {{$value.content}}
        </div>
      </div>
      {{/each}}
      <hr>
      <form>
        <div class="form-group">
          <label for="exampleInputPassword1">添加回复</label>
          <textarea class="form-control" name="" id="commentC" cols="10" rows="10"></textarea>
        </div>
        <button type="button" id="submitBtn" class="btn btn-success">回复</button>
      </form>
    </div>
  </div>
</section>

{{/block}}
{{block 'script'}}
<script>
  $("#submitBtn").click(function (){
    $.ajax({
    type:"post",
    url:"/{{type}}",
    data:{
      id:"{{id}}",
      content:$("#commentC").val(),
    },
    success:(res)=>{
      if(res.err_code==400){
        alert("请先登录！");
        return;
      }
      $("#commentC").val("")
      $("#test_comment").prepend(` <div class="panel panel-default">
        <div class="panel-heading">
          <span>${res.name}</span> 
          <span>${res.time2}</span>
          <span class="action">
            <a href=""><i class="glyphicon glyphicon-thumbs-up pull-right"></i></a>
            <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
          </span>
        </div>
        <div class="panel-body">
          ${res.content}
        </div>
      </div>`)
      alert("评论成功")
    },
    error:()=>{
      alert("评论成功")
    }
  })
  })
   var historyData = {
     _id:"{{@ data._id}}",
     title:"{{@ data.title}}",
     type:"{{@ data.type}}"
   }
  
  var item = JSON.parse(sessionStorage.getItem("history"))||[]
  var idArray = item.map(value =>  value._id)
  if(!idArray.includes(historyData._id)){
    item.unshift(historyData)
    window.sessionStorage.setItem("history",JSON.stringify(item))
  }
</script>
{{/block}}
